<template>
    <div class="easyd-weixin-Box">
        <div class="addPrivateMessageBox">
            <div class="addPrivateMessageSelect">
                <input type="text" readonly placeholder="请选择私信模板" @click="goSelectPrivateTemplate" />
                <div class="rightIcon"><i class="fa fa-angle-right fa-lg"></i></div>
            </div>
            <div class="addPrivateMessageInput">
                <input type="text" placeholder="请输入模板名称" />
            </div>
            <div class="addPrivateMessageTextArea">
                <textarea placeholder="请输入模板描述"></textarea>
            </div>
        </div>
        <div class="addPrivateMessageBottomMenuBox">
            <div class="addPrivateMessageBottomMenuItem">提交</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            imageDemoUrl: "http://testfileupload.oss-cn-beijing.aliyuncs.com/shangpin1.jpg"
        }
    },
    methods : {
        goSelectPrivateTemplate(){
            this.$router.push({
                path : '/selectPrivateTemplate'
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS'
.addPrivateMessageBox {
    position absolute
    top 0px
    bottom 50px
    left 0px
    right 0px
    padding-left 15px
    padding-right 15px
    font-size 16px
    overflow auto
    -webkit-overflow-scrolling : touch;
    box-sizing border-box

    .addPrivateMessageAddDetailItemBox {
        width 100%
        height 50px
        justify-content: space-between;
        display flex
        margin-bottom 15px  

        .addPrivateMessageAddDetailItem {
            width 48%
            height 50px
            text-align center
            line-height 50px
            border-radius 5px

        }
    }

    
    .addPrivateMessageTitle {
        width 100%
        height 50px
        line-height 55px
        text-indent 16px
    }
    
    .addPrivateMessageSelect {
        width 100%
        height 45px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden
        position relative
        margin-top 15px

        input {
            width 100%
            height 100%
            padding 15px
            box-sizing border-box
            -webkit-appearance: none;
            border 1px solid #eee
            padding-right 50px
            outline none
        }

        .rightIcon {
            width 30px
            position absolute
            height 45px
            right 0px
            color #999
            text-align center
            line-height 45px
            top 0px  
        }

    }

    .addPrivateMessageInput {
        width 100%
        height 45px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden
        position relative

        input {
            width 100%
            height 100%
            padding 15px
            -webkit-appearance: none;
            border 1px solid #eee
            box-sizing border-box
            outline none
        }
    }

    .addPrivateMessageTextArea {
        width 100%
        height 150px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden

        textarea {
            width 100%
            height 100%
            padding 10px 15px
            box-sizing border-box
            -webkit-appearance: none;
            border 1px solid #eee
            outline none
        }
    }
}

.addPrivateMessageBottomMenuBox {
    position absolute
    bottom 0px
    height 50px
    left 0px
    right 0px
    background #eee   
    display flex 
    justify-content: space-between;

    .addPrivateMessageBottomMenuItem {
        width 100%
        height 50px
        text-align center
        line-height 50px
        background: #FDDE6E;
    }
}

</style>

